<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <%@include file="/WEB-INF/jspf/meta/meta.jspf" %>
    <title>Title</title>
    <%@include file="/WEB-INF/jspf/adminPage.jspf" %>
    <script type="text/javascript"
            src="<%=request.getContextPath()%>/static/_framework/jquery/jquery.serializejson.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/_framework/jquery/date.js"></script>

    <script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/static/_framework/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/static/_framework/ueditor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="<%=request.getContextPath()%>/static/_framework/ueditor/lang/zh-cn/zh-cn.js"></script>

    <style type="text/css">
        .edui-default .edui-editor-bottomContainer {
            display: none;
            overflow: hidden;
        }
    </style>

    <script>
        $(function () {
            $('#p').panel({
                iconCls:'icon-save',
                fit:true,
            });
        })
    </script>


</head>
<body class="easyui-layout">
<div  data-options="region:'west',title:'历史公告',split:true" style="width:20%;">
    <div id="left" class="easyui-panel"
         style="width:100%;height:100%;padding: 5px">

    </div>
</div>
<div data-options="region:'center'" style="">
    <div class="easyui-layout " data-options="fit:true">
        <div id="p" class="easyui-panel" title="公告详情">

            <div data-options="region:'north',split:true" style="padding:5px;width:100%; height: 35px;">
                <c:if test="${code.contains('notice:insert')}">
                <a href="#" id="add" class="easyui-linkbutton" data-options="iconCls:'icon-search'">新增</a>
                </c:if>
                <c:if test="${code.contains('notice:update')}">
                <a href="#" id="edit" class="easyui-linkbutton" data-options="iconCls:'icon-search'">修改</a>
                </c:if>
                <c:if test="${code.contains('notice:delete')}">
                <a href="#" id="delete" class="easyui-linkbutton" data-options="iconCls:'icon-search'">删除</a>
                </c:if>
                <c:if test="${code.contains('notice:insert')||code.contains('notice:update')}">
                <a href="#" id="save" class="easyui-linkbutton" data-options="iconCls:'icon-search'">保存</a>
                </c:if>
                <div style="display: inline-block;float: right">
                    <input class="easyui-textbox" id="noticeTitle" name="noticeTitle" style="width:350px;margin: 0 auto" data-options="labelAlign:'right',label:'标题:',required:true">
                </div>

            </div>
            <div data-options="region:'center',split:true" style="padding:5px;width:100%;height: 93% ">
                <div  style="width:100%;height:100%;">
                    <div id="editor" type="text/plain" style="width:100%;height:100%;"></div>
                </div>
                <%--<button onclick="getAllHtml()">获得整个html的内容</button>--%>
                <%--<button onclick="getContent()">获得内容</button>--%>
                <%--<button onclick="setContent()">写入内容</button>--%>
                <%--<button onclick="setContent(true)">追加内容</button>--%>
                <%--<button onclick="getContentTxt()">获得纯文本</button>--%>
                <%--<button onclick="getPlainTxt()">获得带格式的纯文本</button>--%>
                <%--<button onclick="hasContent()">判断是否有内容</button>--%>
                <%--<button onclick="setFocus()">使编辑器获得焦点</button>--%>
                <%--<button onmousedown="isFocus(event)">编辑器是否获得焦点</button>--%>
                <%--<button onmousedown="setblur(event)" >编辑器失去焦点</button>--%>
                <%--</div>--%>
                <%--<div>--%>
                <%--<button onclick="getText()">获得当前选中的文本</button>--%>
                <%--<button onclick="insertHtml()">插入给定的内容</button>--%>
                <%--<button id="enable" onclick="setEnabled()">可以编辑</button>--%>
                <%--<button onclick="setDisabled()">不可编辑</button>--%>
                <%--<button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>--%>
                <%--<button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>--%>
                <%--<button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>--%>
                <%--</div>--%>
            </div>
        </div>
    </div>

</div>

<script type="text/javascript">
    var method = '';
    var editId = 0; //正在查看或编辑的公告id

    const ue = UE.getEditor('editor');

    $(function () {
        reloadNotice();//加载左侧列表

        ue.addListener( 'ready', function( editor ) {
            // ue.setDisabled('fullscreen');
            get(-1);//显示最新公告
            ue.setDisabled('fullscreen');
            $("#noticeTitle").textbox('readonly',true);
        } );
        /**
         * 保存
         */
        $("#save").bind('click',function () {
            UE.getEditor('editor').getContent();
            let isValid =  $("#noticeTitle").textbox('isValid');
            if (isValid){
                let title = $("#noticeTitle").textbox('getValue');
                let text = ue.getContent();
                $.ajax({
                    url:path_home+'/notice/'+method,
                    data:{'noticeTitle':title,'noticeText':text,noticeId:editId},
                    dataType:'json',
                    type:'post',
                    success:function(data){
                        //返回的数据
                        $.messager.show({
                            title:'提示',
                            msg:data.msg,
                            timeout:3000,
                            showType:'slide'
                        });
                        //重新加载,禁用编辑
                        ue.setDisabled('fullscreen');
                        $("#noticeTitle").textbox('readonly',true);
                        //重新加载左侧列表
                        reloadNotice();
                        $("#save").linkbutton("disable");
                    }
                });
            } else{
                $.messager.alert('提示','请添加标题','info');
            }
        })

        $("#edit").bind('click',function () {
            //启用编辑
            method='update'
            ue.setEnabled('fullscreen');
            $("#noticeTitle").textbox('readonly',false);
            $("#save").linkbutton("enable");
        })

        $("#add").bind('click',function () {
            method='add'
            //添加
            ue.setEnabled('fullscreen');
            $("#noticeTitle").textbox('readonly',false);
            $("#noticeTitle").textbox('setValue','');
            ue.setContent('');
            $("#save").linkbutton("enable");
        })

        $("#delete").bind('click',function (){
            $.messager.confirm('确认对话框', '您确定要删除吗?', function(r){
                if (r){
                    $.ajax({
                        url:path_home+'/notice/delete',
                        data:{'id':editId},
                        dataType:'json',
                        type:'post',
                        success:function(data){
                            //返回的数据
                            $.messager.show({
                                title:'提示',
                                msg:data.msg,
                                timeout:3000,
                                showType:'slide'
                            });
                            //重新加载
                            reloadNotice();
                            get(-1);//显示最新公告
                        }
                    });
                }
            });
        })

    })

    function reloadNotice() {
        $.ajax({
            url:path_home+'/notice/findAll',
            dataType:'json',
            type:'post',
            success:function(data){
                let html = '';
                //返回的数据
                data.forEach(notice=>{
                    html += "<a href='#' style='width: 100%;margin: 5px 0' onclick='get("+notice.noticeId+")' class='easyui-linkbutton' data-options=\"iconCls:'icon-ok'\">"+notice.noticeTitle+"</a>";
                })
                $("#left").panel({
                    content:html
                })
            }
        });
    }
    
    function get(id) {
        $("#save").linkbutton("disable");//默认不可用

        $.ajax({
            url:path_home+'/notice/get',
            dataType:'json',
            data:{id:id},
            type:'post',
            success:function(notice){
                ue.setContent(notice.noticeText);
                $("#noticeTitle").textbox('setValue',notice.noticeTitle);
                editId=notice.noticeId;
            }
        });
    }
    
    // function isFocus(e){
    //     alert(UE.getEditor('editor').isFocus());
    //     UE.dom.domUtils.preventDefault(e)
    // }
    // function setblur(e){
    //     UE.getEditor('editor').blur();
    //     UE.dom.domUtils.preventDefault(e)
    // }
    // function insertHtml() {
    //     var value = prompt('插入html代码', '');
    //     UE.getEditor('editor').execCommand('insertHtml', value)
    // }
    // function createEditor() {
    //     enableBtn();
    //     UE.getEditor('editor');
    // }
    // function getAllHtml() {
    //     alert(UE.getEditor('editor').getAllHtml())
    // }
    // function getContent() {
    //     var arr = [];
    //     arr.push("使用editor.getContent()方法可以获得编辑器的内容");
    //     arr.push("内容为：");
    //     arr.push(UE.getEditor('editor').getContent());
    //     alert(arr.join("\n"));
    // }
    function getPlainTxt() {
        asd = UE.getEditor('editor').getContent()
        console.log(asd)
    }

    function set() {
        ue.setContent(asd);
    }
    // function setContent(isAppendTo) {
    //     var arr = [];
    //     arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
    //     UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
    //     alert(arr.join("\n"));
    // }
    // function setDisabled() {
    //     UE.getEditor('editor').setDisabled('fullscreen');
    //     disableBtn("enable");
    // }
    //
    // function setEnabled() {
    //     UE.getEditor('editor').setEnabled();
    //     enableBtn();
    // }
    //
    // function getText() {
    //     //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
    //     var range = UE.getEditor('editor').selection.getRange();
    //     range.select();
    //     var txt = UE.getEditor('editor').selection.getText();
    //     alert(txt)
    // }
    //
    // function getContentTxt() {
    //     var arr = [];
    //     arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
    //     arr.push("编辑器的纯文本内容为：");
    //     arr.push(UE.getEditor('editor').getContentTxt());
    //     alert(arr.join("\n"));
    // }
    // function hasContent() {
    //     var arr = [];
    //     arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
    //     arr.push("判断结果为：");
    //     arr.push(UE.getEditor('editor').hasContents());
    //     alert(arr.join("\n"));
    // }
    // function setFocus() {
    //     UE.getEditor('editor').focus();
    // }
    // function deleteEditor() {
    //     disableBtn();
    //     UE.getEditor('editor').destroy();
    // }
    // function disableBtn(str) {
    //     var div = document.getElementById('btns');
    //     var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
    //     for (var i = 0, btn; btn = btns[i++];) {
    //         if (btn.id == str) {
    //             UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
    //         } else {
    //             btn.setAttribute("disabled", "true");
    //         }
    //     }
    // }
    // function enableBtn() {
    //     var div = document.getElementById('btns');
    //     var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
    //     for (var i = 0, btn; btn = btns[i++];) {
    //         UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
    //     }
    // }
    //
    // function getLocalData () {
    //     alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
    // }
    //
    // function clearLocalData () {
    //     UE.getEditor('editor').execCommand( "clearlocaldata" );
    //     alert("已清空草稿箱")
    // }
</script>

</body>
</html>